<template>
    <div>
        <router-link
            tag="div"
            to="/"
            class="header-dis"
            v-show="showDis"
        >
            <div class="iconfont detail-header-back">&#xe624;</div>
        </router-link>
        <div
            class="header"
            v-show="!showDis"
            :style="detailHeaderStyle"
        >
            景点详情
            <router-link to="/">
                <div class="iconfont city-back">&#xe624;</div>
            </router-link>
        </div>
    </div>
</template>

<script>
/* eslint-disable */
export default {
    name: 'detailHeader',
    data() {
        return {
            showDis: true,
            detailHeaderStyle:{
                opacity: 0
            }
        }
    },
    methods:{
        headerScroll(){
            let top = document.documentElement.scrollTop
            if(top > 60){
                let opacity = top/140
                opacity = opacity > 1 ? 1 : opacity
                this.detailHeaderStyle.opacity = opacity
                this.showDis =  false
            }else{
                this.showDis = true
            }
        }
    },
    activated (){
        window.addEventListener('scroll', this.headerScroll)
    },
    deactivated() {
        window.removeEventListener('scroll', this.headerScroll)
    }
}
</script>

<style lang="stylus" scoped>
    @import '~styles/varibles.styl';
    .header-dis
        position absolute
        top .2rem
        left .2rem
        height .8rem
        line-height .8rem
        width .8rem
        border-radius .4rem
        text-align center
        font-size .4rem
        color #ffffff
        background rgba(0,0,0,.4)
    .header
        position fixed
        top 0
        left 0
        right 0
        height $headerHeight
        line-height $headerHeight
        color #ffffff
        background $bgColor
        text-align center
        font-size .32rem
        z-index 2
        .city-back
            position absolute
            width .86rem
            text-align center
            color #ffffff
            top 0
            left 0
</style>
